<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn1{
            display: block;
            width: 150px;
            height: 40px;
            background-color: rgb(245, 241, 129);
            color: rgb(138, 31, 31);
            border: 3px solid rgb(238, 23, 66);
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            /*顶点是圆的*/
            border-radius: 5px;
        }
    </style>
    <!--js引入,通过script标签引入-->
    <!--内部script代码-->
    <script>
        function suprise(){
            alert("hello,我是惊喜")
        }
    </script>
    <!--外部引入-->
    <script src="./button.js" type="text/javascript"></script>
    <script>
        console.log("测试测试");
        // 函数声明
        /* 语法1 function 函数名 （参数列表）{函数体} */
        function sum(a,b){ return a+b;}
        /* 语法2 var 函数名=function(参数列表){函数体}*/
        var result = function(a,b){return a+b;}
        console.log(sum(11,22));
        console.log(result(15,12));

        // 对象声明
        // 1、通过new Object()直接创建对象
        var person = new Object();
        // 给对象添加属性并赋值
        person.name="张小明";
        person.age=10;
        person.foods=["苹果","橘子","香蕉","葡萄"];
        // 给对象添加功能函数
        person.eat = function(){
            console.log(this.age+"岁的"+this.name+"喜欢吃:");
            for(var index in this.foods){
                console.log(this.foods[index]);
            }
        }
        console.log(person.name);
        console.log(person.age);
        person.eat();
        // 2、通过{}形式创建对象
        // 语法为var person={"属性名":"属性值","属性名":"属性值","函数名":函数}
        var people = {
            "name":"王小明",
            "age":28,
            "foods":["苹果","橘子","香蕉","葡萄"],
            "eat": function(){
                console.log(this.age+"岁的"+this.name+"喜欢吃:");
                for(var i=0;i<this.foods.length;i++){
                    console.log(this.foods[i]);
                }
            }
        }
        people.eat();

        // JSON格式:用于前后端传数据
        /*
           json语法:var personStr='{"属性名":"属性值","属性名":"属性值"}'  // 没有函数，传递函数无意义
           JSON.parse() 将一个json串转换成对象
           JSON.stringify() 方法可以将一个对象转换成一个JSON格式的字符串
        */
        var gwcStr = '{"name":"王小明","age":28,"foods":["苹果","橘子","香蕉","葡萄"]}'
        console.log(typeof gwcStr);
        var gwc = JSON.parse(gwcStr);
        console.log(typeof gwc);
        console.log(gwc.name);
        console.log(gwc.foods);
        var gwc1 = JSON.stringify(gwc);
        console.log(typeof gwc1);

    </script>
</head>
<body>
    <!--js的引入方式-->
    <div>
        <!--1、内部脚本方式引入
        script代码其可以放在任何位置，一般放在head标签中居多
        -->
        <button class="btn1" onclick="suprise()">点我有惊喜</button>
        <!--2、外部脚本引用
        一对标签要么定义内部脚本，要么引入外部js文件,不能混用
        一个html文档中可以有多个script标签
        -->
        <button class="btn1" onclick="switchJS()">switchJS</button>
        <!--有错，函数执行了，但不知道执行到哪里去了-->
        <button class="btn1" onclick="whileJS()">whileJS</button>
        <button class="btn1" onclick="foreachJS()">foreachJS</button>

    </div>
    
</body>
</html>